<template>
	<navbar title="我的订单" :isBack="true"></navbar>
	<view class="" v-if="Info.data.length <= 0">
		<nodata></nodata>
	</view>
	<view class="" style="width: 100%;background-color: #F9F9F9;padding: 30rpx;">
		<view class="" v-for="item in Info.data"
			style="width: 100%;background-color: white;border-radius: 10rpx;padding: 24rpx;margin-bottom: 20rpx;"
			@tap="detail(item.id)">
			<view class="" style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
				<view class="" style="color: #535353;font-size: 24rpx;">
					{{item.order_no}}
				</view>
				<view class="" v-if="item.state == 2"
					style="padding: 5rpx 10rpx;color: #34B120;border-radius: 8rpx;background: rgba(87,200,69,0.3);font-size: 20rpx;">
					<span>已付款</span>
				</view>
				<view class=""  v-if="item.state == 3"
					style="padding: 5rpx 10rpx;color: #F56C6C;border-radius: 8rpx;background: rgba(245,108,108,0.3);font-size: 20rpx;">
					<span>已退款</span>
				</view>
			</view>
			<view class="" style="margin-top: 26rpx;display: flex;">
				<view class="">
					<image :src="item.goods.goods_cover" style="width: 256rpx;height: 160rpx;border-radius: 20rpx;"
						mode="aspectFill"></image>
				</view>
				<view class=""
					style="display: flex;flex-direction: column;margin-left: 30rpx;justify-content: space-between;height: 160rpx;width: 100%;margin-top: 20rpx;
			">
					<view class="" style="text-overflow: ellipsis;
			overflow: hidden;
			line-clamp: 2;
			-webkit-line-clamp: 2;
			display: -webkit-box;
			-webkit-box-orient: vertical;">
						{{item.goods.goods_name}}
					</view>
					<view class="" style="color: #535353;font-size: 24rpx;">
						x{{item.goods.num}}
					</view>

					<view class="" style="width: 100%;justify-content: flex-end;display: flex;">
						<span style="font-size: 24rpx;font-weight: bold;line-height: 1.5;">实付：￥</span><span
							style="font-weight: bold;">{{item.goods.total_price}}</span>
					</view>

				</view>
			</view>
		</view>

	</view>

</template>
<script setup lang="ts">
	import {
		onLoad,
		onShareAppMessage,
		onShareTimeline,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		reactive,
		ref
	} from 'vue'
	import nodata from '@/components/nodata.vue'
	import { orderList } from '@/service/api/index'
	import tools from '@/utils/tools'
	const page = ref(1)
	const Info = ref({
		data: []
	}) as any
	onLoad(() => {
		getData()
	})
	onReachBottom(() => {
		if (Info.value.current_page < Info.value.last_page) {
			page.value += 1;
			getData()
		}else{
			tools.showToast('数据加载完了~')
		}
	})
	const getData = async () => {
		const res = await orderList({ page: page.value })
		Info.value = res.msg
	}
	const detail = (id) => {
		tools.navTo('/pagesA/order/orderDetail?id=' + id);
	}
</script>

<style scoped lang="scss">
</style>